<template>
  <div class="hello">
    <div>{{ msg }}</div>
    <!-- 插槽：用来接收 父组件 传来的 内容 -->
    <!-- 1.默认插槽 ------------------->
    <slot />
    <hr />

    <!-- 2.具名插槽 -------------------->
    <slot name="house1">
      <h1>没有别墅，空虚寂寞冷~！</h1>
    </slot>
    <hr />
    <slot name="house2"></slot>

    <!-- 3.作用域插槽 ------------------>
    <!-- 3.1默认作用域插槽 ----->
    <slot dogname="ruiky" catname="小橘子" />
    <!-- 3.2具名作用域插槽 ----->
    <slot name="banzhan" aihao="女装" aihao2="cosplay" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  border: 1px solid #000;
}
</style>
